﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>黑客帝国文字下落</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            background-color: #000;
        }

        .divList {
            width: 800px;
            height: 500px;
            border: solid 3px gray;
            margin: 0px auto;
            overflow: hidden;
            position: relative;
        }

        .divText {
            position: absolute;
        }

        .divText span {
            display: block;
            font-weight: bold;
            font-family: Courier New;
        }
    </style>
</head>
<body>
    <div id="container">
        <script type="text/html">
            {{view controller="main" app="demo" /}}
            <h1 style="text-align:center; color:gray;">黑客帝国文字下落(<a href="rain_org.html">使用原始方式</a>)</h1>
            <div class="divList">
                {{cp name="cp1" /}}
            </div>
        </script>
    </div>
    <script src="../scripts/bingo2/bingo.js"></script>
    <script src="route.js"></script>
    <script type="text/javascript">

        (function (bingo) {
            bingo.ready(function () {
                //console.profile('boot');
                console.time('boot');
                bingo.compile(document.getElementById('container')).then(function () {
                    console.timeEnd('boot');
                    //console.profileEnd('boot');
                });
            });

            demoApp.controller('main', function ($view) {
                
                //$view.rainList = [], list =[];
                //for (var i = 0; i < 50; i++)
                //    list.push(i);

                //$view.rainList = list;

                var count = 0,
                    createRain = function () {
                        $view.cp1.$insertAfter('{{rain /}}').then(function () {
                            if (count >= 50) return;
                            count++;
                            bingo.aFramePromise().then(function () {
                                createRain();
                            });
                        });
                    };

                $view.$ready(function () {
                    createRain();
                });

            }); //end controller main

            var _rand = function(min, max) {
                return min + Math.round(Math.random() * (max - min));
            }

            demoApp.command('rain', function (cp) {

                cp.$tmpl('{{view /}}<div node="[[divNode]]" class="divText" style="left:[[left]]px; bottom:[[bottom]]px;">{{for item in cList}}<span class="s[[item.cIndex]]" style="color:#[[item.color]]; font-size:[[item.fontSize]]px; text-shadow:0px 0px 10px #[[item.color]];">{{text item.c /}}</span>{{/for}}</div>');

                cp.$controller(function ($view) {


                    var fontSize = _rand(9, 24), cList = [];
                    for (var i = 1; i < 17; i++) {
                        var c = _rand(33, 127);
                        var c = String.fromCharCode(c);
                        cList.push({
                            cIndex: i,
                            color: '0' + i.toString(16) + '0',
                            fontSize: fontSize,
                            c: c
                        });
                    }

                    $view.divNode = null;
                    $view.cList = cList;
                    $view.left = _rand(0, 800);
                    $view.bottom = 500;
                    var _moveHeight = fontSize / 2,
                        _height = 0;


                    $view.$ready(function () {
                        _height = $view.divNode.offsetHeight;
                        $view.bottom -= _moveHeight;
                    });

                    //观察top属性改变
                    $view.$layout('bottom', function (c) {
                        if ($view.bottom + _height <= 0) {
                            $view.bottom = 500
                            $view.left = _rand(0, 800);
                            //cp.$parent.$remove();
                            return;
                        }
                        $view.bottom -= _moveHeight;
                    }.bind($view));

                }); //end controller

            }); //end command rain

            

        })(bingoV2);

    </script>
</body>
</html>
